const path = require("path")
const htmlWebpackPlugins = require("html-webpack-plugin")
const VueLoaderPlugin = require("vue-loader/lib/plugin")
/* global __dirname */
module.exports = {
	entry: "./src/main.js", //  入口
	output: { // 出口
		filename: "./build.js", // 制定js文件
		path: path.join(__dirname, "dist")
	},
	module: {
		rules: [{ // css 处理
			test: /\.css$/,
			use: ["style-loader", "css-loader"]
		},
		{ // 图片处理
			test: /\.(png|svg|jpg|gif)$/,
			use: { // 使用过滤条件
				loader: "url-loader",
				options: {
					limit: 4096,
					name: "[name].[ext]"
				}
			}
		},
		{ // 文字字体处理
			test: /\.(woff|woff2|eot|ttf|otf)$/,
			use: ["file-loader"]
		},
		{ // 处理csv
			test: /\.(csv|tsv)$/,
			use: ["csv-loader"]
		},
		{ // 处理xml
			test: /\.xml$/,
			use: ["xml-loader"]
		},
		{ // 处理ES6的js
			test: /\.js$/,
			exclude: /(node_modules|bower_components)/, // 去除不需要文件
			use: {
				loader: "babel-loader",
				options: {
					presets: ["@babel/preset-env"], // 关键字  webpack 4
					plugins: ["@babel/plugin-transform-runtime"], // 函数 webpack 4
				}
			}
		},
		{ // 解析VUE
			test: /\.vue$/,
			exclude: /(node_modules|bower_components)/, // 去除不需要文件
			use: {
				loader: "vue-loader"
			}
		}
		]
	},
	plugins: [
		// 插件执行顺序是依次执行
		new htmlWebpackPlugins({
			template: "./src/index.html"
		}),
		// 使用vue-loader的时候必须使用这个
		new VueLoaderPlugin()
	]
}